<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Order - ECharts</title>

<!-- 引入jquery.js -->
<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="static/js/echarts.min.js"></script>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style=" height: 400px;"></div>

	<script type="text/javascript">
	var worldMapContainer = document.getElementById('main');
	//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    var resizeWorldMapContainer = function () {
        worldMapContainer.style.width = (window.innerWidth-30)+'px';
        worldMapContainer.style.height = (window.innerHeight-30)+'px';
    };
    //设置容器高宽
    resizeWorldMapContainer();
	var myChart = echarts.init(worldMapContainer);
		// 显示标题，图例和空的坐标轴
		var option = {
				 title: {
				        text: "机器人运行速度监控",
				        x: "center"
				    },
				    tooltip: {
				        trigger: "axis"
				    },
				    legend: {
				        data: ["J1", "J2", "J3"],
				        x: "right",
				        y: 12
				    },
				    toolbox: {
				        show: false,
				        feature: {
				            dataView: {
				                readOnly: true
				            },
				            magicType: {
				                type: ["line", "bar"],
				                show: false
				            }
				        }
				    },
				    calculable: true,
			    xAxis: {
			            type: 'category',
			            boundaryGap: true,
			            data: (function (){
			                var now = new Date();
			                //alert(now);
			                var hh = now.getHours();
			                //alert(hh);
			                var res = [];
			                var len = 10;
			                while (len--) {
			                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
			                    now = new Date(now-30000);
			                    /* if(hh>=6){
			                       res.unshift(hh+":00"); 
			                       now = new Date(hh - 3600000);
			                       hh-=1;
			                    } */
			                    
			                }
			                return res;
			            })()
			        },
			    yAxis:
			        {
			            type: 'value',
			            scale: true,
			            //name: '价格',
			           //max: 30,
			            min: 0,
			            boundaryGap: [0.2, 0.2]
			        },
			    series: [
			    	{
			            name:'j1',
			            type:'line',
			            data:(function (){
			                var res = [];
			                var len = 0;
			                while (len < 10) {
			                    res.push((Math.random()*100 + 5).toFixed(0) - 0);
			                    len++;
			                }
			                return res;
			            })()
			        },
			        {
			            name:'j2',
			            type:'line',
			            data:(function (){
			                var res = [];
			                var len = 0;
			                while (len < 10) {
			                    res.push((Math.random()*100 + 5).toFixed(0) - 0);
			                    len++;
			                }
			                return res;
			            })()
			        },
			        {
			            name:'j3',
			            type:'line',
			            data:(function (){
			                var res = [];
			                var len = 0;
			                while (len < 10) {
			                    res.push((Math.random()*100 + 5).toFixed(0) - 0);
			                    len++;
			                }
			                return res;
			            })()
			        }
			    ]
			};
		myChart.setOption(option);
		var app = 11;
		setInterval(function (){
		    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');

		    var data0 = option.series[0].data;
		    var data1 = option.series[1].data;
		    var data2 = option.series[2].data;
		    data0.shift();
		    data0.push((Math.random() * 140 + 5).toFixed(1) - 0);
		    data1.shift();
		    data1.push((Math.random() * 140 + 5).toFixed(1) - 0);
		    data2.shift();
		    data2.push((Math.random() * 140 + 5).toFixed(1) - 0);

		    option.xAxis.data.shift();
		    option.xAxis.data.push(axisData);
 		    /* option.xAxis[1].data.shift();
		    option.xAxis[1].data.push(app);  */ 

		    myChart.setOption(option);
		}, 5000);
	</script>
</body>
</html>